<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>{{ isTransform ? "转换推文" : "发布推文" }}</h1>
        <!-- 转换推文，无此 -->
        <span
          class="rightBtn"
          style="color: #deaa8a;"
          @click="back"
          v-if="!isTransform"
          >上一步</span
        >
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div>
      <div class="pTip">设置跳转按钮和链接</div>
      <div class="formlist">
        <div class="item ">
          <div class="left">
            按钮文字<img src="../../assets/images/mkf/must.png" />
          </div>
          <div class="right">
            <input
              class="yellow"
              type="text"
              placeholder="请输入，如“立即下载”"
              v-model="words"
            />
          </div>
        </div>
        <div class="item ">
          <div class="left">
            跳转链接<img src="../../assets/images/mkf/must.png" />
          </div>
          <div class="right">
            <input type="text" placeholder="请输入跳转链接" v-model="link" />
          </div>
        </div>
      </div>
      <div class="pTip">选择个人/社群名片</div>
      <div class="formlist">
        <div class="item" style="align-items: flex-start;">
          <div class="left">
            个人名片<img src="../../assets/images/mkf/must.png" />
          </div>
          <div class="right">
            <div class="choose" @click="$router.push('/card')">
              <!-- <span class="txt">请选择我的个人名片</span> -->
            </div>
            <!-- 已选择名片 -->
            <div class="card">
              <img class="head" src="../../assets/images/adver.jpg" />
              <div class="info">
                <p class="name line1">麻小云</p>
                <p class="des line1">
                  阿里巴巴创始人/慈善会会长/蚂蚁阿里巴巴创始人/慈善会会长/蚂蚁
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="item ">
          <div class="left">关联社群</div>
          <div class="right" @click="showPicker = true">
            <div class="choose">
              <span class="txt" v-if="linkCom != ''" style="color: #fff;">{{
                linkCom
              }}</span>
              <span class="txt" v-else>请选择关联的社群</span>
            </div>
          </div>
        </div>
      </div>

      <button type="button" class="btn" :disabled="disabled" @click="doSubmit">
        <span v-if="!isTransform">确认发表</span>
        <span v-else>确认转换（￥9.99）</span>
      </button>
    </div>

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :title="'请选择关联的社群'"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        visible-item-count="5"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { Picker } from "vant";
export default {
  name: "",
  components: {
    vanPicker: Picker,
    vanPopup: Popup
  },
  props: {},
  data: function() {
    return {
      isTransform: false,
      linkCom: "",
      showPicker: false,
      columns: [],
      words: "",
      link: "",
      disabled: true
    };
  },
  mounted: function() {
    this.columns = ["我创建的社群1", "我创建的社群2", "我加入的社群1"];
    this.disabled = false;
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    doSubmit() {
      console.log("doSubmit");
      this.$dialog.toast({ mes: "发表成功/转换成功" });
    },
    onConfirm(value, index) {
      this.linkCom = value;
      this.showPicker = false;
      console.log(`当前值：${value}, 当前索引：${index}`);
    }
  }
};
</script>

<style scoped>
.fixHead .title .rightBtn {
  padding: 0 4px;
  margin-left: 0.2rem;
}

.pTip {
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  color: #666666;
}

.formlist {
  background-color: #32303a;
  width: 100%;
  padding: 0 0.2rem;
  margin-bottom: 0.23rem;
}

.formlist .item {
  align-items: center;
}

.formlist .item .right input.yellow {
  display: block;
  width: 5.5rem;
  height: 0.8rem;
  background-color: #deaa8a;
  border-radius: 0.1rem;
  font-size: 0.28rem;
  color: #2a2631;
  text-align: center;
  margin: 0.1rem 0;
}

.formlist .item .right input.yellow::-webkit-input-placeholder {
  color: #2a2631;
  opacity: 0.7;
}

.btn {
  display: block;
  width: 100%;
  height: 0.98rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-size: 0.32rem;
  font-weight: bold;
  color: #2a2631;
  background-color: #deaa8a;
}

.btn:disabled {
  color: rgba(42, 38, 49, 0.5);
}

.formlist .item .right .card {
  margin-bottom: 0.2rem;
}
</style>
<style>
.van-cell {
  background: transparent;
  padding: 0;
}
.van-cell .van-cell__value .van-field__body textarea {
  line-height: 0.64rem;
}
.van-picker__title {
  color: #ffffff;
  opacity: 0.5;
}
.van-picker {
  background-color: #32303a;
}
.van-picker__cancel,
.van-picker__confirm {
  color: #999999;
  width: 90px;
}
.van-picker__confirm {
  text-align: right;
}
.van-picker__cancel:active,
.van-picker__confirm:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.van-picker-column__item {
  color: rgba(255, 255, 255, 1);
}
.van-hairline--top-bottom::after {
  border-width: 0;
}
.van-picker__mask {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(50, 48, 58, 0.9)),
      to(rgba(50, 48, 58, 0.4))
    ),
    -webkit-gradient(linear, left bottom, left top, from(rgba(50, 48, 58, 0.9)), to(rgba(50, 48, 58, 0.4)));
  background-image: linear-gradient(
      180deg,
      rgba(50, 48, 58, 0.9),
      rgba(50, 48, 58, 0.4)
    ),
    linear-gradient(0deg, rgba(50, 48, 58, 0.9), rgba(50, 48, 58, 0.4));
}
.van-picker__frame {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
